<route lang="json5">
{
  meta: {
    auth: true,
  },
}
</route>

<template>
  <div
    class="h-full bg-no-repeat bg-cover"
    :style="{
      backgroundImage: `url(${bgSvg}) `,
    }"
  >
    <Swiper
      v-bind="SwiperProps"
      :style="{
        height: '100%',
      }"
      class="w-full"
    >
      <swiper-slide v-for="(text, index) in CONTENTS">
        <div
          :class="{
            '!text-red-50 ': index === realIndex,
          }"
          class="text-6xl font-bold p-12 font-mono text-red-800 transition-all duration-[2s]"
        >
          <p v-for="item in text" class="py-4">
            {{ item }}
          </p>
        </div>
      </swiper-slide>
      <swiper-slide style="height: 6rem !important">
        <a-skeleton animation class="flex">
          <a-skeleton-shape class="h-24 w-24 mr-4" />
          <div class="w-0 flex-1">
            <a-skeleton-line :rows="3" />
          </div>
        </a-skeleton>
      </swiper-slide>
    </Swiper>

    <Transition name="fade">
      <div
        v-if="realIndex > 1"
        @click="moveToTop"
        title="返回顶部"
        class="absolute right-8 bg-white bg-opacity-60 shadow rounded-full p-2 bottom-16 w-8 h-8 z-20 cursor-pointer text-blue-400"
      >
        <Icon icon="oi:chevron-top" class="h-full w-full" />
      </div>
    </Transition>
  </div>
</template>

<script lang="ts" setup>
import bgSvg from 'svgs/bg.svg'
import { HashNavigation, Mousewheel } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import type { Swiper as SwiperClass } from 'swiper/types'
import 'swiper/css/pagination'
import 'swiper/css'
type ISwiperProps = InstanceType<typeof Swiper>['$props']

const CONTENTS = ['床前明月光', '疑是地上霜', '举头望明月', '低头思故乡']

const swiperRef = ref<SwiperClass>()

const realIndex = useLocalStorage('swiper-real-index', 0)

onMounted(() => {
  const LastPosition = realIndex.value
  if (LastPosition) {
    swiperRef.value?.slideToLoop(LastPosition)
  }
})

function moveToTop() {
  swiperRef.value?.slideTo(0, 1000)
}

const SwiperProps: ISwiperProps = {
  modules: [Mousewheel, HashNavigation],
  slidesPerView: 'auto',
  direction: 'vertical', //"horizontal",
  noSwiping: true,
  noSwipingClass: 'no-swiping',
  mousewheel: {
    releaseOnEdges: true,
    forceToAxis: true,
    sensitivity: 1,
    // eventsTarged:''
  },
  speed: 1000,
  initialSlide: 0,
  threshold: 20,
  watchSlidesProgress: true,
  onSwiper: (e) => {
    swiperRef.value = e
  },
  onSlideChange: (e) => (realIndex.value = e.realIndex),
  onProgress: (swiper, progress) => {
    for (let i = 0; i < swiper.slides.length - 1; i++) {
      const slideProgress = (swiper.slides[i] as { progress?: number }).progress || 0
      const innerOffset = swiper.width * 0.5
      const innerTranslate = slideProgress * innerOffset
      gsap.set(swiper.slides[i], {
        // y: innerTranslate / 9,
        scale: 1 - Math.abs(slideProgress / CONTENTS.length),
        filter: `blur(${Math.abs(slideProgress) * 10}px)`,
      })
      gsap.set(swiper.slides[i], {
        backgroundPosition: `center ${innerTranslate / 2}px`,
        boxShadow: `inset 0 0 300px 600px rgba(0,0,0,${Math.abs(slideProgress)})`,
      })
    }
  },
  onSetTransition: (swiper, speed) => {
    for (let i = 0; i < swiper.slides.length - 1; i++) {
      swiper.slides[i].style.transition = speed + 'ms'
      // swiper.slides[i].style.transition = speed + "ms";
    }
  },
}
</script>
